<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .item {
            padding: 10px;
        }

        .big {
            width: 300px;
            height: 300px;
            background-color: #f55;
            display: none;
            /* padding: 10px; */
        }
        .main,.all{
            width: 150px;
            height: 50px;
            border: 1px solid #f0f;
        }
        .all{
            background-color: #00f;
        }
        .all:hover .big{
            display: block;
        }
    </style>
</head>

<body>
    <div class="all">
        <div class="main">变化内容</div>
        <div class="big">当前效果</div>
    </div>
    <script>
        var data = [
            "全国",
            "北京",
            "上海",
            "开封",
            "深圳",
            "郑州",
            "天津",
            "驻马店",
            "周口",
            "新郑",
            "青海",
            "全国",
            "北京",
            "上海",
            "开封",
            "深圳",
            "郑州",
            "天津",
            "驻马店",
            "周口",
            "新郑",
            "青海",
            "全国",
            "北京",
            "上海",
            "开封",
            "深圳",
            "郑州",
            "天津",
            "驻马店",
            "周口",
            "新郑",
            "青海",
            "全国",
            "北京",
            "上海",
            "开封",
            "深圳",
            "郑州",
            "天津",
            "驻马店",
            "周口",
            "新郑",
            "青海",
            "全国",
            "北京",
            "上海",
            "开封",
            "深圳",
            "郑州",
            "天津",
            "驻马店",
            "周口",
            "新郑",
            "青海",
        ];
        var big = document.querySelector(".big");
        var main = document.querySelector(".main");
        function itemFn(aa) {
            main.innerHTML = aa;
        }
        data.map((item) => {
        
            big.innerHTML += `<span class="item" onclick="itemFn('${item}')">${item}</span>`;
        });
    </script>
</body>

</html>